<template>
  <div class="content">
    <ul class="imageList">
      <li v-for="item in rolerDataList" class="info" :class="{ 'active': item.id == actIdx }">
        <img :src="utils.getAssetsFile(item.src)" alt="图片">
      </li>
    </ul>
    <img v-show="!id" :src="utils.getAssetsFile(actIdx + '.gif')" alt="wife">
    <!-- <img class="ub-gif" :src="utils.getAssetsFile('7.gif')" alt="wife"> -->
    <el-button @click="lottery()">抽 奖</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { rolerData } from './utils/enumData';
import utils from './utils/utils'

// 角色数据
const rolerDataList = ref(rolerData);
// 当前下标
const actIdx = ref(0)

const id: any = ref(null)
let random = 0;
// 抽奖事件
const lottery = () => {
  if (id.value) return
  actIdx.value = 0;
  random = Math.floor(Math.random() * 8) + 1;
  console.log('random', random)
  roller()
}

// 实现变速滚动
const roller = () => {
  let num = 0;
  let A = 0; //第几轮
  var t = 100; // 初速度
  id.value = setInterval(fn, t);
  var time = [150, 200, 300, 500];

  function fn() {
    actIdx.value++
    num++
    if ((random + 19) == num || actIdx.value == 9) {
      if (actIdx.value == 9) {
        actIdx.value = 1
      }
      t = time[A++];
      clearInterval(id.value);
      id.value = setInterval(fn, t);
    }
    if ((random + 24) == num) {
      clearInterval(id.value)
      id.value = null
    }
  }
}
</script>

<style scoped>
.active {
  border: 1px solid #f8acac !important;
  box-shadow: 0 0 3px 4px #f8acac;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.content .imageList {
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 480px;
  height: 480px;
}

.content .info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  width: 150px;
  border: 1px dashed #999797;
  border-radius: 12px;
}

.content .ub-gif {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}
</style>
